<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box">
      <h6 class="common-title">申请提现</h6>
      <section>

      <el-button-group class="sub-nav">
        <el-button size="mini" type="primary" >申请提现</el-button>
        <el-button size="mini" type="primary" @click="$router.push('/withdraw-way4')">提现方式</el-button>
        <el-button size="mini" type="primary" @click="$router.push('/withdraw-list4')">提现记录</el-button>
      </el-button-group>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="提现途径：">
          <el-select
            v-model="typeName"
            placeholder="请选择提现途径">
            <el-option
              v-for="label,val in typeMap"
              :key="label"
              :label="label"
              :value="val">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提现账户号：">
          <el-input v-model="cashAccount"></el-input>
        </el-form-item>
        <el-form-item label="账户名：">
          <el-input v-model="cashName"></el-input>
        </el-form-item>
        <el-form-item label="提现金额：">
          <el-input v-model="form.money"></el-input>
        </el-form-item>
        <el-form-item label="确认金额：">
          <el-input v-model="form.moneyRepeat"></el-input>
        </el-form-item>
        <el-form-item label="提现手续费：">
          <span>{{ extFee }}元</span>
          <span
            >手续费规则：100~104：1%，104~105：2%，105~106：3%，106~202：3%
            <span v-for="item in fee" :key="item.cashRateID"
              >{{ item.startMoney }}~{{ item.endMoney }}: {{ item.rateNum
              }}<em v-if="item.rateType === 2">%</em>；
            </span>
          </span>
        </el-form-item>
        <el-form-item label="交易密码：">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交申请</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  layout: 'webIn4',
  middleware: ['tradePwd'],
  async asyncData({ $axios }) {
    const a = await $axios.get('/finance/cashType/list')
    const typeMap = {}
    if (a.code === 1001 && a.body) {
      a.body.forEach((item) => {
        typeMap[item.cashTypeID] = item.cashTypeName
      })
    }
    const b = await $axios.get('/finance/cashMethod/get')
    const data = {
      form: {},
      typeName: '',
      cashAccount: '',
      cashName: '',
      cashMethodState: ''
    }
    if (b.code === 1001 && b.body) {
      data.typeName = typeMap[b.body.cashTypeID]
      data.cashAccount = b.body.cashAccount
      data.cashName = b.body.cashName
      data.cashMethodState = b.body.cashMethodState
    }
    const c = await $axios.get('/finance/cashRate/listCashRate')
    let fee = []
    if (c.code === 1001 && c.body) {
      fee = c.body
    }
    return { typeMap, fee, ...data }
  },
  data() {
    return {
      form: {
        money: '',
        moneyRepeat: '',
        password: ''
      },
    }
  },
  computed: {
    ...mapState({
      hasTradePwd: (state) => state.hasTradePwd
    }),
    extFee() {
      if (this.form.money) {
        const money = parseFloat(this.form.money)
        for (let i = this.fee.length - 1; i >= 0; i--) {
          const item = this.fee[i]
          if (money >= item.startMoney) {
            if (item.rateType === 2) {
              return parseFloat(((money / 100) * item.rateNum).toFixed(2))
            } else if (item.rateType === 1) {
              return item.rateNum
            }
          }
        }
      }
      return 0
    }
  },
  methods: {
    submit() {
      if (this.hasTradePwd) {
        return this.$prompt('请输入交易密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'password'
          // inputPattern: //,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.onSubmit(value)
        })
      }
      this.onSubmit()
    },
    async onSubmit(password) {
      if (this.cashMethodState === 1) {
        return this.$message.error(
          '当前提现方式正在审核，请等待审核通过后，方可提现'
        )
      }
      if (this.form.money !== this.form.moneyRepeat) {
        return this.$message.error('金额输入错误，请重新输入')
      }
      const loading = this.$loading()
      const res = await this.$axios.post('/finance/cash/add', null, {
        params: { money: this.form.money }
      })
      if (res.code === 1001) {
        this.$message.success('提交提现申请成功')
        this.$router.push('/withdraw-list4')
      } else {
        loading.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'element-ui/lib/theme-chalk/index.css';

.sub-nav {
  margin-bottom: 28px;
  position: absolute;
  top: 8px;
  right: 10px;
  // a {
  //   float: none;
  //   display: inline-block;
  //   text-decoration: none;
  //   color: $--deep-gray-text-color;
  //   &:hover {
  //     color: $--color-primary;
  //   }
  //   &.selected {
  //     line-height: 34px;
  //     color: $--color-primary;
  //     border-bottom: 2px solid $--color-primary;
  //   }
  // }
  // a + a {
  //   margin: 0 0 0 15px;
  // }
}
section {
  padding: 15px;
  background: white;
  ::v-deep.el-form {
    .el-input {
      width: 500px;
      margin-right: 10px;
    }
    .el-input + em {
      font-size: 12px;
      color: #bfbfbf;
    }
    .el-textarea {
      textarea {
        width: 500px;
        resize: none;
        height: 100px;
      }
      & + i {
        font-style: normal;
      }
    }
  }
}

// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';


</style>

<style>
@import 'assets/style/el-adapter.css';
</style>
